<template>
  <section class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain :todoList="store.visibilityData"></TodoMain>
    <TodoFooter :visibility="store.visibility"></TodoFooter>
  </section>
</template>
<script setup lang="ts">
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
import useTodoStore from "./stores/useTodoStore";
import { watchEffect } from "vue";
import { useLocalStorage } from "./hooks/useLocalStorage";
let store = useTodoStore();
watchEffect(() => {
  localStorage.setItem("visibility", store.visibility);
  useLocalStorage("todomvc", store.todoList);
});
</script>

<style scoped>
</style>